<template>
    <div>
        <div class="toolbar">
            <el-form :inline="true" :model="q" size="mini">
                <el-form-item label="代理账号:">
                    <!-- <el-input v-model="q.id" placeholder="代理账号" prefix-icon="el-icon-edit"></el-input> -->
                  <el-select v-model="q.id" clearable filterable placeholder="请输入代理账号">
                    <el-option v-for="item of AgencyList" :key="item.id" :label="item.id+'>'+item.user_name+'>'+item.nickname"
                              :value="item.id" ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="关联商户:">
                    <el-select v-model="q.mch_id" clearable placeholder="请选择">
                        <el-option
                                v-for="item in MerchantsList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="安全码:">
                    <el-select v-model="q.use_vcode" clearable placeholder="请选择">
                        <el-option
                                v-for="item in [{id:true,name:'开启'},{id:false,name:'关闭'}]"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="IP白名单:">
                    <el-select v-model="q.use_white_ips" clearable placeholder="请选择">
                        <el-option
                                v-for="item in  [{id:true,name:'已配置'},{id:false,name:'未配置'}]"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否可用:">
                    <el-select v-model="q.enable" clearable placeholder="请选择">
                        <el-option
                                v-for="item in [{id:true,name:'可用'},{id:false,name:'禁用'}]"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工作状态:">
                    <el-select v-model="q.working" clearable placeholder="请选择">
                        <el-option v-for="item in [{id:true,name:'工作中'},{id:false,name:'休息中'}]"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="代理等级:">
                    <el-select v-model="q.level" clearable placeholder="请选择">
                        <el-option
                                v-for="(item,index) in $store.state.app.AgentLevel"
                                :key="index"
                                :label="item"
                                :value="index">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="下发等级:">
                    <el-select v-model="q.user_level" clearable placeholder="请选择">
                        <el-option
                                v-for="(item,index) in UserLevel"
                                :key="item"
                                :label="item"
                                :value="index">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                    <el-button type="danger" @click="reload">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-row type="flex" class="row-bg btn-row" justify="end">
            <el-button size="mini" @click="add" type="primary" icon="el-icon-plus">新增代理</el-button>
        </el-row>
        <el-table :data="listData.items" v-loading.body="listLoading" @sort-change="sortlist" size="mini" stripe border
                  fit
                  highlight-current-row>
            <el-table-column prop="id" label='代理ID' width="80" fixed="left"></el-table-column>
            <el-table-column prop="user_name" label='代理账号' width="150"></el-table-column>
            <el-table-column prop="nickname" label='代理昵称' width="150"></el-table-column>
            <el-table-column prop="avatar" label='头像' width="70">
                <template slot-scope="scope">
                    <img :src="avatar+scope.row.avatar" width="50" height="50" style="   border-radius: 50%; "/>
                </template>
            </el-table-column>
            <el-table-column prop="mchs" label='关联商户' width="160" :formatter="typeFormartter"></el-table-column>
            <el-table-column prop="balance" label='余额' width="100">
                <template slot-scope="scope">{{scope.row.balance/100}}</template>
            </el-table-column>
            <el-table-column prop="use_vcode" label='安全码' width="90" :formatter="typeFormartter"></el-table-column>
            <el-table-column prop="enable" label='是否可用' width="100" :formatter="typeFormartter"></el-table-column>
            <el-table-column prop="warning_amount" label='预警金额' width="120"></el-table-column>
            <el-table-column label='IP白名单' prop="white_ips" width="90">
                <template slot-scope="scope">{{scope.row.white_ips?"已配置":"未配置"}}</template>
            </el-table-column>
            <el-table-column prop="score" label='代理评分' width="100" ></el-table-column>
            <el-table-column prop="level" label='代理等级' width="100"></el-table-column>
            <el-table-column prop="user_level" label='下发等级' width="100">
              <template slot-scope="scope">{{UserLevel[scope.row.min_user_level]}}</template>
            </el-table-column>
            <el-table-column prop="working" label='工作状态' width="100" :formatter="typeFormartter"></el-table-column>
            <el-table-column prop="remark" width="260" label='备注'></el-table-column>
            <el-table-column prop="created_at" label='创建时间' sortable width="180"></el-table-column>
            <el-table-column prop="updated_at" label='更新时间' sortable width="180"></el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
                <template slot-scope="scope">
                    <div>
                        <el-button type="success" size="mini" @click="resetPwd(scope.row)">重置密码</el-button>
                        <el-button type="primary" size="mini" @click="update(scope.row)">编辑</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="q.page_no" :page-sizes="$store.state.app.pageSizeArr"
                           :page-size="q.page_size"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="listData.total">
            </el-pagination>
        </div>
        <save-update v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id" :AgencyType="AgencyType"
                     :MerchantsList="MerchantsList"></save-update>
    </div>
</template>

<script>
    import saveUpdate from './saveUpdate'
    import {getAgencyList, deleteAgency, getAgencyInfo, resetPassword} from '@/api'
    import {useVcode} from "../../utils/CommonJs";

    export default {
        components: {saveUpdate},
        data() {
            return {
                listData: {},
                q: {page_size: 30, page_no: 1, agency_type: 1},
                listLoading: false,
                showUpdate: false,
                settleCycle: this.$store.state.app.settleCycle,
                show_id: null,
                AgencyType: this.$store.state.app.AgencyType,
                UserLevel: this.$store.state.app.UserLevel,
                MerchantsList: [],
                AgencyList: [],
                avatar: 'http://image.barchain.net/',
                resetPwdMeg: false,
                vcode: ''
            }
        },
        activated() {
            this.getList()
        },
        created(){
            this.getAgencyInfo()
      this.getAgencyList()
        },
        deactivated() {
            this.listLoading = false
        },
        methods: {
            add() {
                if (this.resetPwdMeg) {
                    this.resetPwdMeg.close();
                }
                this.show_id = null
                this.showUpdate = true
            },
            resetPwd(row) {
                this.$confirm(`是否确认重置密码？`, '重置密码', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    useVcode(this,()=>{
                        if (this.resetPwdMeg) {
                            this.resetPwdMeg.close();
                        }
                        resetPassword(row.id).then(res => {
                            if (res.status === 0) {
                                let msg = '重置密码成功，' + '密码为：' + res.data.password
                                this.resetPwdMeg = this.$message({
                                    type: 'success',
                                    message: msg,
                                    duration: 3000,
                                    showClose: true
                                })
                            }
                        })
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    })
                })
            },
            update(row) {
                if (this.resetPwdMeg) {
                    this.resetPwdMeg.close();
                }
                this.show_id = row.id
                this.showUpdate = true
            },
            remove(row) {
                if (this.resetPwdMeg) {
                    this.resetPwdMeg.close();
                }
                this.$confirm(`确认删除ID为${row.id}的项么？`, '删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteAgency(row.id).then(res => {
                        if (res.status === 0) {
                            this.$message({type: 'success', message: '删除成功!', showClose: true})
                            this.getList()
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            query() {
                this.q = Object.assign(this.q, {page_no: 1, page_size: 30})
                this.getList()
            },
            reload() {
                this.q = {page_size: 30, page_no: 1, agency_type: 1}
                this.getList()
            },
            sortlist(sort) {
                this.q.$orderby = sort.prop
                this.getList()
            },
            handleSizeChange(val) {
                this.q.page_size = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.q.page_no = val
                this.getList()
            },
            getList() {
                if (this.resetPwdMeg) {
                    this.resetPwdMeg.close();
                }
                getAgencyList(this.q).then(res => {
                    if (res.status === 0) {
                        this.listLoading = false
                        this.listData = res.data
                        this.listData.items = Array.from(res.data.items, x => Object.assign({}, x, {warning_amount: Number(x.warning_amount) / 100}))
                    }
                })
            },
      getAgencyList () {
        getAgencyList({ agency_type: 2, page_size: 1000 }).then(res => {
          if (res.status === 0) {
            this.AgencyList = res.data.items
          }
        })
      },
            getAgencyInfo() {
                getAgencyInfo().then(res => {
                    if (res.status === 0) {
                        this.MerchantsList = res.data.mchs
                    }
                })
            },
            typeFormartter(row, column) {
                let columnName = column.property
                if (columnName === 'use_vcode') {
                    return row.use_vcode ? '开启' : '关闭'
                } else if (columnName === 'enable') {
                    return row.enable ? '可用' : '禁用'
                } else if (columnName === 'working') {
                    return row.working ? '工作中' : '休息中'
                } else if (columnName === 'mchs') {
                    let mchsList = []
                    row.mchs.forEach(item => {
                        mchsList.push(item.name)
                    })
                    return mchsList.toString()
                }else if(columnName === 'user_level'){
                    return this.$store.state.app.UserLevel[row.user_level]
                }
            }
        },
        watch: {
            showUpdate() {
                if (!this.showUpdate) {
                    this.getList()
                }
            }
        }
    }
</script>
